<div class="card-form hidden card-k8s space-y-4">
  <div data-controller="card-select">
    <label class="mb-2">Which managed Kubernetes provider are you using?</label>
    <div class="form-group">
      <div class="flex gap-4">
        <select class="hidden" data-card-select-target="input">
          <option value="digitalocean">Digital Ocean</option>
          <option value="linode">Linode</option>
          <option value="linode">Other</option>
        </select>
        <%= render "clusters/instructions/cards/digitalocean" %>
        <%= render "clusters/instructions/cards/linode" %>
        <%= render "clusters/instructions/cards/other" %>
      </div>
    </div>

    <div class="my-10 has-styled-links">
      <%= render "clusters/instructions/instructions/digitalocean" %>
      <%= render "clusters/instructions/instructions/linode" %>
      <%= render "clusters/instructions/instructions/other" %>
    </div>
  </div>

  <%= render(FormFieldComponent.new(
    label: "Kubeconfig File",
    description: "The kubeconfig file for your cluster. Only YAML files are accepted."
  )) do %>
    <%= form.file_field :kubeconfig_file, class: "file-input w-full", accept: ".yaml,.yml" %>
    <label class="label">
      <span class="label-text-alt">* Required</span>
    </label>
  <% end %>

  <div class="form-footer">
    <%= form.button "Submit", class: "btn btn-primary" %>

    <% if form.object.new_record? %>
      <%= link_to t("cancel"), clusters_path, class: "btn btn-secondary" %>
    <% else %>
      <%= link_to t("cancel"), cluster_path(@cluster), class: "btn btn-secondary" %>
    <% end %>
  </div>
</div>
